<template>
  <div class="QRcode_container">
    <div>
      <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portal/background_head.png" alt="" class="QRhead">
    </div>
    <div class="QRbody">
      <div class="QR_container">
        <!-- <img src="" alt="" class="QR_img" id="qr"> -->
        <qrcode :value="url" :options="{ size: 200 }"></qrcode>
        <!-- <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portal/QRcode.png" alt="" class="QR_img"> -->
      </div>
      <div class="QR_content">
        微信扫一扫
      </div>
      <div class="id_number_container">
        <div class="id_number_content">
          <span id="name">{{org||''}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { wxshare } from 'common/mixin'
import VueQrcode from '@xkeshi/vue-qrcode'
import { mapGetters } from 'vuex';

export default {
    mixins: [wxshare],
    data() {
        return {
            size: 300
        }


    },
    computed: {
        ...mapGetters([
            'tpcode',
            'phone',
            'org'
        ]),
        url: function() {
            console.log(this.tpcode)
            if (process.env.NODE_API !== 'ONLINE') {
                return `http://channel.test.zhanwangjkgl.com/?tpAdminCode=${this.tpcode}`;
            } else {
                return `http://fzsywx.zhanwangjkgl.com/?tpAdminCode=${this.tpcode}`;
            }

        }
    },
    components: {
        qrcode: VueQrcode
    },
}
</script>
<style lang="less">
.QRcode_container {

    .QRhead {
        width: 100%;
    }

    .QR_container {
        text-align: center;
        margin-top: 2rem;
    }

    .QR_img {
        width: 50%;
        border: 4px solid #030000;
    }
    .QR_content {
        text-align: center;
        margin-top: 0.5rem;
        font-size: 1rem;
        font-family: "微软雅黑";
        color: #030000;
    }

    .id_number_container {
        text-align: center;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
        width: 9.5rem;
        height: 1.6rem;
        background: #e2e1e1;
    }

    .id_number_content {
        height: 1.6rem;
        line-height: 1.6rem;
        color: #868383;
        font-size: 1rem;
        font-family: "微软雅黑";
    }
}
</style>
